<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/xhtml;charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<meta name="generator" content="Doxygen 1.8.13"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>dbcloud: MySQL Development Manual</title>
<link href="tabs.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="dynsections.js"></script>
<link href="navtree.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="resize.js"></script>
<script type="text/javascript" src="navtreedata.js"></script>
<script type="text/javascript" src="navtree.js"></script>
<script type="text/javascript">
  $(document).ready(initResizable);
</script>
<link href="search/search.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="search/searchdata.js"></script>
<script type="text/javascript" src="search/search.js"></script>
<link href="doxygen.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="top"><!-- do not remove this div, it is closed by doxygen! -->
<div id="titlearea">
<table cellspacing="0" cellpadding="0">
 <tbody>
 <tr style="height: 56px;">
  <td id="projectlogo"><img alt="Logo" src="csmake.v2.100.png"/></td>
  <td id="projectalign" style="padding-left: 0.5em;">
   <div id="projectname">dbcloud
   &#160;<span id="projectnumber">1.0</span>
   </div>
  </td>
 </tr>
 </tbody>
</table>
</div>
<!-- end header part -->
<!-- Generated by Doxygen 1.8.13 -->
<script type="text/javascript">
var searchBox = new SearchBox("searchBox", "search",false,'Search');
</script>
<script type="text/javascript" src="menudata.js"></script>
<script type="text/javascript" src="menu.js"></script>
<script type="text/javascript">
$(function() {
  initMenu('',true,false,'search.php','Search');
  $(document).ready(function() { init_search(); });
});
</script>
<div id="main-nav"></div>
</div><!-- top -->
<div id="side-nav" class="ui-resizable side-nav-resizable">
  <div id="nav-tree">
    <div id="nav-tree-contents">
      <div id="nav-sync" class="sync"></div>
    </div>
  </div>
  <div id="splitbar" style="-moz-user-select:none;" 
       class="ui-resizable-handle">
  </div>
</div>
<script type="text/javascript">
$(document).ready(function(){initNavTree('mysql.html','');});
</script>
<div id="doc-content">
<!-- window showing the filter options -->
<div id="MSearchSelectWindow"
     onmouseover="return searchBox.OnSearchSelectShow()"
     onmouseout="return searchBox.OnSearchSelectHide()"
     onkeydown="return searchBox.OnSearchSelectKey(event)">
</div>

<!-- iframe showing the search results (closed by default) -->
<div id="MSearchResultsWindow">
<iframe src="javascript:void(0)" frameborder="0" 
        name="MSearchResults" id="MSearchResults">
</iframe>
</div>

<div class="header">
  <div class="headertitle">
<div class="title">MySQL Development Manual </div>  </div>
</div><!--header-->
<div class="contents">
<div class="textblock"><div class="image">
<img src="https://avatars1.githubusercontent.com/u/17017373?s=460&v=4" alt="webmysql"/>
</div>
<h1>webmysql</h1>
<h2>About us</h2>
<p>Accessing server-side MySQL through client javascript API. This project is a branch of <a href="https://github.com/csmake/webmysql">dbcloud</a></p>
<p>You can do almost invoke on MySQL through the javascript API in browser.</p>
<p>The client javascript api support <code>IE6.0+ Chrome FireFox and Wechat</code></p>
<p>web: <a href="http://mongo.dbcloud.org">http://mongo.dbcloud.org</a></p>
<p>mail: <a href="#" onclick="location.href='mai'+'lto:'+'dbc'+'lo'+'ud@'+'cs'+'mak'+'e.'+'com'; return false;">dbclo<span style="display: none;">.nosp@m.</span>ud@c<span style="display: none;">.nosp@m.</span>smake<span style="display: none;">.nosp@m.</span>.com</a></p>
<h2>Application scenarios</h2>
<p>Rapid prototyping does not need to write server-side code.</p>
<p>Academic teaching and research, WYSIWYG</p>
<p>Enterprise internal application</p>
<p>Other applications that do not focus on the security of the database table structure.</p>
<h2>Start the basic project</h2>
<ol type="1">
<li>Run MySQL first.</li>
<li>Put webmysql.war in your servlet server webapps ,Apache Tomcat8.0 , Glass Fish Server4.x and so on.</li>
<li>Open browser(Chrome FireFox IE) and put <a href="http://localhost:8080/webmysql/,">http://localhost:8080/webmysql/,</a> The address may be different depending on your settings</li>
</ol>
<h2>Start to write your web application</h2>
<ol type="1">
<li>Copy Statement.java and StatementServlet.java from webmysql.war /src/java/.. , into your src/java/org/dbcloud/mysql</li>
<li>Copy all *.js files in webmysql.war /js to your js directory. JQuery is necessary. IE6.0 need to use the 1.x version and json2.js is necessary.</li>
<li>Edit the web.xml, like this: <div class="fragment"><div class="line">&lt;<span class="keywordtype">servlet</span>&gt;</div><div class="line">    &lt;<span class="keywordtype">servlet-name</span>&gt;<span class="keyword">MySQLStatement</span>&lt;/<span class="keywordtype">servlet-name</span>&gt;</div><div class="line">    &lt;<span class="keywordtype">servlet-class</span>&gt;<span class="keyword">org.dbcloud.mysql.StatementServlet</span>&lt;/<span class="keywordtype">servlet-class</span>&gt;</div><div class="line">    &lt;<span class="keywordtype">init-param</span>&gt;</div><div class="line">        &lt;<span class="keywordtype">param-name</span>&gt;<span class="keyword">guid</span>&lt;/<span class="keywordtype">param-name</span>&gt;</div><div class="line">        &lt;<span class="keywordtype">param-value</span>&gt;<span class="keyword">class</span>&lt;/<span class="keywordtype">param-value</span>&gt;</div><div class="line">    &lt;/<span class="keywordtype">init-param</span>&gt;</div><div class="line">    &lt;<span class="keywordtype">init-param</span>&gt;</div><div class="line">        &lt;<span class="keywordtype">param-name</span>&gt;<span class="keyword">driver</span>&lt;/<span class="keywordtype">param-name</span>&gt;</div><div class="line">        &lt;<span class="keywordtype">param-value</span>&gt;<span class="keyword">com.mysql.jdbc.Driver</span>&lt;/<span class="keywordtype">param-value</span>&gt;</div><div class="line">    &lt;/<span class="keywordtype">init-param</span>&gt;</div><div class="line">    &lt;<span class="keywordtype">init-param</span>&gt;</div><div class="line">        &lt;<span class="keywordtype">param-name</span>&gt;<span class="keyword">connection</span>&lt;/<span class="keywordtype">param-name</span>&gt;</div><div class="line">        &lt;<span class="keywordtype">param-value</span>&gt;<span class="keyword">jdbc:mysql:</span>//<span class="keyword">localhost:3306</span>/<span class="keyword">yourdbname</span>?<span class="keyword">useUnicode</span>=<span class="keyword">true</span>&amp;<span class="keyword">amp</span>;<span class="keyword">characterEncoding</span>=<span class="keyword">utf8</span>&amp;<span class="keyword">amp</span>;<span class="keyword">autoReconnect</span>=<span class="keyword">true</span>&amp;<span class="keyword">amp</span>;<span class="keyword">failOverReadOnly</span>=<span class="keyword">false</span>&lt;/<span class="keywordtype">param-value</span>&gt;</div><div class="line">    &lt;/<span class="keywordtype">init-param</span>&gt;</div><div class="line">    &lt;<span class="keywordtype">init-param</span>&gt;</div><div class="line">        &lt;<span class="keywordtype">param-name</span>&gt;<span class="keyword">user</span>&lt;/<span class="keywordtype">param-name</span>&gt;</div><div class="line">        &lt;<span class="keywordtype">param-value</span>&gt;<span class="keyword">test</span>&lt;/<span class="keywordtype">param-value</span>&gt;</div><div class="line">    &lt;/<span class="keywordtype">init-param</span>&gt;</div><div class="line">    &lt;<span class="keywordtype">init-param</span>&gt;</div><div class="line">        &lt;<span class="keywordtype">param-name</span>&gt;<span class="keyword">password</span>&lt;/<span class="keywordtype">param-name</span>&gt;</div><div class="line">        &lt;<span class="keywordtype">param-value</span>&gt;<span class="keyword">test</span>&lt;/<span class="keywordtype">param-value</span>&gt;</div><div class="line">    &lt;/<span class="keywordtype">init-param</span>&gt;</div><div class="line">&lt;/<span class="keywordtype">servlet</span>&gt;</div><div class="line">&lt;<span class="keywordtype">servlet-mapping</span>&gt;</div><div class="line">    &lt;<span class="keywordtype">servlet-name</span>&gt;<span class="keyword">MySQLStatement</span>&lt;/<span class="keywordtype">servlet-name</span>&gt;</div><div class="line">    &lt;<span class="keywordtype">url-pattern</span>&gt;/<span class="keyword">org.dbcloud.mysql.Statement</span>&lt;/<span class="keywordtype">url-pattern</span>&gt;</div><div class="line">&lt;/<span class="keywordtype">servlet-mapping</span>&gt;</div></div><!-- fragment --></li>
<li>Edit your html file, you can see the index.html</li>
</ol>
<div class="fragment"><div class="line">    ﻿&lt;!DOCTYPE html&gt;</div><div class="line">    &lt;html &gt;</div><div class="line">    &lt;head&gt;</div><div class="line">        &lt;title&gt;MySQL demo&lt;/title&gt;</div><div class="line">    &lt;/head&gt;</div><div class="line">    &lt;body&gt;</div><div class="line">        &lt;div id=&#39;log&#39;&gt;&lt;/div&gt;</div><div class="line">    &lt;/body&gt;</div><div class="line">    &lt;script src=&quot;js/jQuery-1.12.4.js&quot;&gt;&lt;/script&gt;</div><div class="line">    &lt;script src=&quot;js/org.dbcloud.mysql.Statement.js&quot;&gt;&lt;/script&gt; </div><div class="line">    &lt;script&gt;</div><div class="line">        function log(msg) {</div><div class="line">            $(&quot;#log&quot;).append(&quot;&lt;p&gt;&quot; + msg.replace(&quot;\n&quot;, &quot;&lt;/p&gt;&lt;p&gt;&quot;) + &quot;&lt;/p&gt;&quot;);</div><div class="line">        }</div><div class="line">        try {</div><div class="line">            log(&quot;MySQL Test:&quot;);</div><div class="line">            var stmt = new org.dbcloud.mysql.Statement();</div><div class="line">            if (stmt) {</div><div class="line">                var result;</div><div class="line">                log(&quot;create table:&quot; + JSON.stringify(stmt.execute(&quot;create table if not exists temp_user(name char(50) ,id int ) &quot;)));</div><div class="line">                var start = new Date().getTime();</div><div class="line">                var total = 0;</div><div class="line">                for (var j = 0; j &lt; 10; j++) {</div><div class="line">                    var sqls = [];</div><div class="line">                    for (var i = 0; i &lt; 10; i++) {</div><div class="line">                        sqls.push(&quot;insert into temp_user(name,id) values(&#39;names&quot; + i + &quot;&#39;,&quot; + i + &quot;)&quot;);</div><div class="line">                        total++;</div><div class="line">                    }</div><div class="line">                    log(&quot;&quot; + JSON.stringify(stmt.execute(sqls)) + &quot;&quot;);</div><div class="line">                }</div><div class="line">                log((new Date().getTime() - start) / 1000 + &quot;&#39;s insert &quot; + total + &quot; records!&quot;);</div><div class="line"></div><div class="line">                result = stmt.executeQuery(&quot;select name ,id  from temp_user&quot;, {document: true});</div><div class="line">                log(&quot;Synchronize the query and return the document structure data, which can be operated directly as a JSON object:&quot;);</div><div class="line">                log(JSON.stringify(result));</div><div class="line">                if (result.rows &amp;&amp; result.rows.length &gt; 0)</div><div class="line">                {</div><div class="line">                    log(result.rows[0].name);</div><div class="line">                }</div><div class="line">                log(&quot;Synchronize query and return two dimensional table structure data:&quot;);</div><div class="line">                result = stmt.executeQuery(&quot;select name ,id  from temp_user&quot;);</div><div class="line">                log(JSON.stringify(result));</div><div class="line">                if (result.error) {</div><div class="line">                    log(&quot;error:&quot; + result.error.message + &quot;\ncode:&quot; + result.error.code + &quot;\nSQLState:&quot; + result.error.SQLState);</div><div class="line">                }</div><div class="line">                stmt.executeQuery({done: function (r) {</div><div class="line">                        log(&quot;Asynchronous query:&quot; + JSON.stringify(r));</div><div class="line">                    }, fail: function (e) {</div><div class="line">                        log(e.message);</div><div class="line">                    }, always: function () {</div><div class="line">                        log(&quot;Deleting the datasheet and closing the data link&quot;);</div><div class="line">                        stmt.execute(&quot;drop table temp_user&quot;)</div><div class="line">                        //stmt.close();//If a server shares a link, it should not be closed.</div><div class="line">                    }}, &quot;select * from temp_user&quot;, {document: false});</div><div class="line">            }</div><div class="line">        } catch (e) {</div><div class="line">            log(e.message);</div><div class="line">        }</div><div class="line">    &lt;/script&gt;</div><div class="line">&lt;/html&gt;</div></div><!-- fragment --> </div></div><!-- contents -->
</div><!-- doc-content -->
<!-- start footer part -->
<div id="nav-path" class="navpath"><!-- id is needed for treeview function! -->
  <ul>
    <li class="navelem"><a class="el" href="index.html">Development Manual</a></li>
    <li class="footer">Generated by
    <a href="http://www.doxygen.org/index.html">
    <img class="footer" src="doxygen.png" alt="doxygen"/></a> 1.8.13 </li>
  </ul>
</div>
</body>
</html>
